<template>
    <div id="sup-tool">
        <div ref="supTool" id="contentShow" class="supTool">
            <div class="tool" :class="{'hide':hide}" v-show="show" ref="tool">
                <div class="list" @mousedown.stop @mouseup.stop @touchstart.stop @touchend.stop>
                    <!-- <div class="ppt-title">
                        <img src="../assets/ppt.png" style="margin-right:13px" width="32px" />
                        <span class="name" @click="openPPT">{{lessonInfo.lessonName}}</span>
                    </div> -->
                    <!--列表-->
                    <el-menu :default-openeds="['1','2']" default-active="0" class="menu-container" > <!-- mode="horizontal" menu-trigger="click" -->
                        <el-submenu index="1" class="menu-list" style="padding-left: 0;height:auto">
                            <template slot="title" style="padding-left: 0;" >
                                <span class="border"></span>上课资源
                            </template>
                            <el-menu-item :class="[item.name.length>12 ? 'menu-item' : '']" style="padding-left: 0;height: 30px;line-height: 30px;background:rgba(247, 251, 255, 1) ;" :index="item.id"
                                v-for="(item, index) in lessonInfo.lessonItems" :key="index"
                                @click.native.prevent="e=>openOneResource(e,item)">
                                <!-- <div v-if="item.metaType === 'selfPpt'">
                                    <img class="img-ico" src="../assets/ppt.png" /><div class="name-box"><span :class="item-name">{{formatName(item.name)}}</span></div>
                                </div> -->
                                <div v-if="item.metaType === 'selfPdf'">
                                    <img class="img-ico" src="../assets/selfRes.png" /><div class="name-box"><span class="item-name">{{formatName(item.name)}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'selfWord'">
                                    <img class="img-ico" src="../assets/selfRes.png" /><div class="name-box"><span class="item-name">{{formatName(item.name)}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'selfImg'">
                                    <img class="img-ico" src="../assets/selfRes.png" /><div class="name-box"><span class="item-name">{{formatName(item.name)}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'selfVideo' || item.metaType === 'PolyvVideo'">
                                    <img class="img-ico" src="../assets/PolyvVideo.png" /><div class="name-box"><span class="item-name">{{formatName(item.name)}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'selfAudio'">
                                    <img class="img-ico" src="../assets/selfRes.png" /><div class="name-box"><span class="item-name">{{formatName(item.name)}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'ZoomIn'">
                                    <img class="img-ico" src="../assets/ZoomIn.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'HeatMap'">
                                    <img class="img-ico" src="../assets/HeatMap.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'BosVideo'">
                                    <img class="img-ico" src="../assets/HeatMap.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'VirtualReality'">
                                    <img class="img-ico" src="../assets/VirtualReality.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'TimeLapse'">
                                    <img class="img-ico" src="../assets/TimeLapse.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'Rotation360'">
                                    <img class="img-ico" src="../assets/Rotation360.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'Partial'">
                                    <img class="img-ico" src="../assets/Partial.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'InnerStruct'">
                                    <img class="img-ico" src="../assets/InnerStruct.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'PaperFile'">
                                    <img class="img-ico" src="../assets/InnerStruct.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'MultiAngle'">
                                    <img v-if="item.metaType === 'MultiAngle'" class="img-ico"
                                        src="../assets/MultiAngle.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'VrHotspot'">
                                    <img v-if="item.metaType === 'VrHotspot'" class="img-ico"
                                        src="../assets/MultiAngle.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'StepExplore'">
                                    <img v-if="item.metaType === 'StepExplore'" class="img-ico"
                                        src="../assets/MultiAngle.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'Quiz'">
                                    <img v-if="item.metaType === 'Quiz'" class="img-ico"
                                        src="../assets/Quiz.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'Collection'">
                                    <img v-if="item.metaType === 'Collection'" class="img-ico"
                                        src="../assets/Collection.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'VirtualLab'">
                                    <img v-if="item.metaType === 'VirtualLab'" class="img-ico"
                                        src="../assets/Collection.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                                <div v-if="item.metaType === 'MindMap'">
                                    <img v-if="item.metaType === 'MindMap'" class="img-ico"
                                        src="../assets/Collection.png" /><div class="name-box"><span class="item-name">{{item.name}}</span></div>
                                </div>
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <span class="border"></span>授课工具
                            </template>
                            <el-menu-item class="item-content" style="padding-left: 0;" index="2-0"
                                @click.native.prevent="picture">
                                <img class="img-ico" src="../assets/picture.png" />手机传图
                            </el-menu-item>
                            <el-menu-item  class="item-content" style="padding-left: 0;" index="2-1"
                                @click.native.prevent="countDown">
                                <img class="img-ico" src="../assets/time.png" />活动计时
                            </el-menu-item>
                            <el-menu-item  class="item-content" style="padding-left: 0;" index="2-2"
                                @click.native.prevent="extractNumber">
                                <img class="img-ico" src="../assets/num.png" />随机点名
                            </el-menu-item>
                            <el-menu-item  class="item-content" style="padding-left: 0;" index="2-3"
                                @click.native.prevent="charts">
                                <img class="img-ico" src="../assets/charts.png" />统计图表
                            </el-menu-item>
                            <el-menu-item  class="item-content" style="padding-left: 0;" index="2-4"
                                @click.native.prevent="mindMap">
                                <img class="img-ico" src="../assets/mindmap.png" />思维导图
                            </el-menu-item>
                            <el-menu-item  class="item-content" style="padding-left: 0;" index="2-5"
                                @click.native.prevent="recognize">
                                <img class="img-ico" src="../assets/recognize_icon.png" />科普识图
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>

                <!--菜单-->
                <div class="change">
                    <div class="type" @click="exit">
                        <!-- <img src="../assets/export.png" /> -->
                        <span>一键下课</span>
                    </div>
                    <div class="type" @click="backDesktop">
                        <!-- <img src="../assets/compress.png" /> -->
                        <span>返回首页</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 悬浮球 -->
        <div class="move-tips" v-if="!showTips">按住悬浮球可以拖动位置，点击悬浮球收起</div>
        <div id="suspension" :style="`background-image: url(${backImg})`" class="suspension" v-show="isSuspension">
        </div>
    </div>
</template>

<script>
import { UrlUtil } from "../../../../static/utils/UrlUtil";
import { SqlLibUser } from "../../../../static/lib/sqlite/service/SqlLibUser";
import { SqlLibBook } from "../../../../static/lib/sqlite/service/SqlLibBook";
import { SqlLib } from "../../../../static/lib/sqlite/SqlLib";
import { Lesson } from "../../../../static/lib/sqlite/model/Lesson";
import { RecUserResource } from "../../../../static/lib/sqlite/model/RecUserResource";
import { UUIDUtil } from "../../../../static/utils/UUIDUtil";
import moment from "moment";
import { UserClassEvents } from '../../../../static/lib/sqlite/model/UserClassEvents';
import { Ini } from '../../content/utils/ini';
import { ShowPpt } from '../../content/utils/ppt'
export default {
    name: "suspension",
    data () {
        return {
            isMouseMove: false,
            show: false,
            isSuspension: true,
            hide: false,
            createSuspension: false,
            position: [],
            lessonId: "",
            userId: "",
            lessonInfo: {
                lessonName: "",
                lessonItems: [{
                    bsr: "",
                    id: "",
                    metaType: "",
                    name: ""
                }]
            },
            screenWidth: -1,
            screenHeight: -1,
            newWindowStartTime: null,
            backImg: Ini.readIni('data', 'eduLevel') === 'primary' ? ('' + require('../assets/tool.png')) : ('' + require('../assets/ava-ms.png')),
            firstMove: true,
            showTips: window.localStorage.getItem('tips'),
            openRes:[],
            showPptObj: new ShowPpt(),
            teachMode:'',
        }
    },
    mounted () {
        let win = this.$electron.remote.getCurrentWindow();
        let _this = this;
        this.$electron.ipcRenderer.send('getScreenWH', {})
        this.$electron.ipcRenderer.on('getScreenWH-reply', function (event, arg) {
            let result = JSON.parse(arg);
            _this.screenWidth = result.width;
            _this.screenHeight = result.height;
        });
        let biasX = 0;
        let biasY = 0;
        let winPosition = null;
        let that = this;
        let startTime = 0
        let endTime = 0
        // 触屏拖动事件处理
        document.addEventListener('touchstart', function (e) {
            startTime = Date.now()
            biasX = e.changedTouches[0].screenX;
            biasY = e.changedTouches[0].screenY;
            winPosition = win.getPosition();
            document.addEventListener('touchmove', touchMoveEvent);
        });
        document.addEventListener('touchend', function (e) {
            endTime = Date.now()
            let diffTime = endTime - startTime
            diffTime < 250 && that.newWindow(e) //小于250就执行单击操作
            startTime = 0
            biasX = 0;
            biasY = 0;
            document.removeEventListener('touchmove', touchMoveEvent)
        });

        // 鼠标拖动事件处理
        document.addEventListener('mousedown', function (e) {
            startTime = Date.now()
            switch (e.button) {//代表是左键点击
                case 0:
                    biasX = e.x;
                    biasY = e.y;
                    document.addEventListener('mousemove', moveEvent);
                    break;
            }
        });

        document.addEventListener('mouseup', function (e) {
            endTime = Date.now()
            let diffTime = endTime - startTime
            diffTime < 250 && that.newWindow(e) //小于250就执行单击操作
            startTime = 0
            biasX = 0;
            biasY = 0;
            document.removeEventListener('mousemove', moveEvent)
        });
        function moveEvent (e) {
            let x = e.screenX - biasX
            let y = e.screenY - biasY
            if (x < -120) {
                x = -120
            }
            if (screen.width - x < 120) {
                x = screen.width - 120
            }
            if (y < -540) {
                y = -540
            }
            if (screen.height - y < 540) {
                y = screen.height - 540
            }
            if (that.firstMove) {
                that.firstMove = false
                return
            }
            win.setBounds({ width: 240, height: 580, x: x, y: y });
        }

        function touchMoveEvent (e) {
            e.preventDefault()
            if (winPosition.length === 2) {
                let x = winPosition[0] + e.changedTouches[0].screenX - biasX
                let y = winPosition[1] + e.changedTouches[0].screenY - biasY
                if (x < -120) {
                    x = -120
                }
                if (x > _this.screenWidth - 120) {
                    x = _this.screenWidth - 120
                }
                if (y < -540) {
                    y = -540
                }
                if (y > _this.screenHeight - 540) {
                    y = _this.screenHeight - 540
                }
                if (that.firstMove) {
                    that.firstMove = false
                    return
                }
                win.setBounds({ width: 240, height: 580, x: x, y: y });
            }
            winPosition = win.getPosition();
        }
        this.$nextTick(() => {
            //增加点击穿透窗口事件
            let el = document.getElementById('contentShow');
            el.addEventListener('mouseenter', () => {
                win.setIgnoreMouseEvents(true, { forward: true })
            })
            el.addEventListener('mouseleave', () => {
                win.setIgnoreMouseEvents(false)
            })

            this.lessonId = UrlUtil.getQueryString("lessonId");
            this.userId = UrlUtil.getQueryString("userId");
            let sqlLib = SqlLib.getInstance(window.$DBDIR);
            let lesson = new Lesson();
            lesson.id = this.lessonId;
            lesson = sqlLib.selectObjectById(lesson);
            this.lessonInfo.lessonName = lesson.name;
            this.lessonInfo.lessonItems = [];
            let lessonResource = SqlLibUser.queryLessonResource(sqlLib, this.userId, this.lessonId);
            lessonResource.forEach(resource => {
                console.log('resourcezzzzzz',resource);
                let bsr = JSON.parse(resource.resourceDescription);
                let currentItem = {
                    bsr: resource.resourceDescription,
                    id: resource.resourceId,
                    metaType: resource.resourceType
                }
                
                if (['courseware', 'selfPpt', 'selfPdf','selfWord','selfImg','selfVideo','selfAudio', 'PaperFile'].includes(resource.resourceType)) {
                    currentItem.name = bsr.name;
                } else {
                    currentItem.name = bsr.meta_info.name;
                }
                if (resource.resourceType !== 'courseware' && resource.resourceType !== 'selfPpt' ) {
                    if (resource.downloadStatus !== '2') {
                        this.lessonInfo.lessonItems.push(currentItem)
                    }else{
                        console.log('未下载');
                    }
                }
            });
            console.log(lessonResource)
            console.log(this.lessonInfo.lessonItems);
        });
        this.$nextTick(() => {
            this.newWindow()
        })
    },
    methods: {
        formatName(name){
            if(name.lastIndexOf('.') > 0){
                let newName = name.substring(0,name.lastIndexOf('.'))
                return newName
            }else{
                return name
            }
        },
        openPPT(){
            this.showPptObj.shutDownPpt()
            if (!localStorage.getItem('teachMode')) {
                this.teachMode = 'local'
            }else{
                const key = localStorage.getItem('teachMode')
                switch (key) {
                    case '1':
                    this.teachMode = 'local'
                        break;
                    case '2':
                    this.teachMode = 'online'
                    break;
                    case '3':
                        this.teachMode = localStorage.isOffline == "true" ? 'local' : 'online' 
                    break;
                    default:
                    break;
                }
            }
            
            let sqlLib = SqlLib.getInstance(window.$DBDIR)
            let user = SqlLibUser.queryCurrentUser(sqlLib)
            let userResource = SqlLibBook.queryDefaultPpt(sqlLib, this.lessonId)
            if (userResource !== null) {
                const path = require('path');
                if (userResource.resourceType === 'courseware') {
                    if (this.teachMode == 'local'){
                        var respath = null
                        respath = path.resolve(window.$DATADIR, 'resc', 'courseware', lessonItem.downloadInfo.TaskId + '.ppt')
                        if(!respath){
                           respath = path.resolve(window.$DATADIR, 'resc', 'courseware', lessonItem.downloadInfo.TaskId + '.pptx')
                        }
                        this.showPptObj.openPpt(respath)
                    }else if(this.teachMode == 'online'){
                        this.$electron.ipcRenderer.send('showResourceHideWindow', { metaId: 'onlinePPT', userId: '',lessonId:userResource.lessonId, onlinePPtId:userResource.resourceId})
                    }
                    
                }
                if (userResource.resourceType === 'selfPpt') {
                    if (this.teachMode == 'local'){
                        let bsr = userResource.resourceDescription
                        let fileName = JSON.parse(bsr).downloadInfo.FileName
                        console.log(user);
                        console.log(path.resolve(window.$DATADIR, 'resc', 'user', 'ppt', user.id, fileName));
                        this.showPptObj.openPpt(path.resolve(window.$DATADIR, 'resc', 'user', 'ppt', user.id, fileName))
                    }else if(this.teachMode == 'online'){
                        console.log(userResource);
                        this.$electron.ipcRenderer.send('showResourceHideWindow', { metaId: 'onlinePPT', userId: '',lessonId:userResource.lessonId, onlinePPtId:userResource.reverse1})
                    }
                    
                }
            }
        },
        openOneResource (e, item) {
            if(this.lessonInfo.lessonItems) {
                this.lessonInfo.lessonItems.forEach(item=>{
                     let params = {}
                     params.metaId = item.id
                     this.$electron.ipcRenderer.send('close-resource-window',params)
                })
            }
            const path = require("path");
            let _this = this;
            let recUserResource = new RecUserResource();
            recUserResource.id = UUIDUtil.uuid();
            recUserResource.lessonId = this.lessonId;
            recUserResource.userId = this.userId;
            recUserResource.gmtCreate = moment().format('YYYY-MM-DD HH:mm:ss');
            this.hiddenMenu()
            let lessonItem = JSON.parse(item.bsr);
            if (lessonItem.downloadInfo && lessonItem.downloadInfo.FileType !== 'PaperFile') {
                switch (lessonItem.downloadInfo.FileType) {
                    case 'courseware':
                        _this.$openPPT(path.resolve(window.$DATADIR, "resc", "courseware", lessonItem.downloadInfo.TaskId + ".pptx"), true);
                        break;
                    case 'selfPpt':
                        _this.$openPPT(path.resolve(window.$DATADIR, "resc", "user", "ppt", _this.userId, lessonItem.downloadInfo.FileName), true);
                        break;
                    case 'selfPdf':
                        _this.$openNativeFile(path.resolve(window.$DATADIR, "resc", "user", "pdf", _this.userId, lessonItem.downloadInfo.FileName));                        
                        break;
                    case 'selfWord':
                        _this.$openNativeFile(path.resolve(window.$DATADIR, "resc", "user", "word", _this.userId, lessonItem.downloadInfo.FileName));
                        break;
                    case 'selfImg':
                        _this.$openNativeFile(path.resolve(window.$DATADIR, "resc", "user", "img", _this.userId, lessonItem.downloadInfo.FileName));
                        break;
                    case 'selfVideo':
                        _this.$openNativeFile(path.resolve(window.$DATADIR, "resc", "user", "video", _this.userId, lessonItem.downloadInfo.FileName));
                        break;
                    case 'selfAudio':
                        _this.$openNativeFile(path.resolve(window.$DATADIR, "resc", "user", "audio", _this.userId, lessonItem.downloadInfo.FileName));
                        break;
                    default:
                        break;
                }
                recUserResource.metaInfoId = lessonItem.downloadInfo.TaskId;
                recUserResource.metaType = 'courseware';

            } else {
                // this.$electron.ipcRenderer.send('showResourceWindow', {metaId:meta_id,userId:this.userId,lessonId:this.lessonId})
                let params = { userId: this.userId, lessonId: this.lessonId }
                if (lessonItem.downloadInfo && lessonItem.downloadInfo.FileType === 'PaperFile') {
                    params.metaId = lessonItem.id
                    params.metaType = 'PaperFile'
                } else {
                    params.metaId = lessonItem.meta_info.meta_id
                    params.res_type = lessonItem.meta_info.res_type
                }
                this.$electron.ipcRenderer.send('showResourceHideWindow', params)
                this.$electron.ipcRenderer.on('showResourceWindow-reply', function (event, arg) {
                    console.log(arg);
                    _this.$message.warning(arg);
                });
                recUserResource.metaInfoId = lessonItem.meta_info.id;
                recUserResource.metaType = lessonItem.meta_info.meta_type;
            }
            SqlLib.getInstance(window.$DBDIR).insertObject(recUserResource);
        },
        // 下课-关闭悬浮球
        exit () {
            console.log('下课');
            let sqlLib = SqlLib.getInstance(window.$$DBDIR)
            let user = SqlLibUser.queryCurrentUser(sqlLib)
            let classEvent = new UserClassEvents()
            classEvent.id = UUIDUtil.uuid()
            classEvent.type = '1'
            classEvent.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
            classEvent.userId = user.id
            SqlLibBook.insertEndClassTime(sqlLib, classEvent)
            console.log(this.lessonInfo);
            if (this.lessonInfo.lessonItems) {
                 this.lessonInfo.lessonItems.forEach(item=>{
                     let params = {}
                     params.metaId = item.id
                     this.$electron.ipcRenderer.send('close-resource-window',params)
                 })
            }
            this.$electron.ipcRenderer.send("close-resource-window", {metaId: "Picture",});
            this.$electron.ipcRenderer.send("close-resource-window", {metaId: "countDown",});
            this.$electron.ipcRenderer.send("close-resource-window", {metaId: "extractNumber",});
            this.$electron.ipcRenderer.send("close-resource-window", {metaId: "charts",});
            this.$electron.ipcRenderer.send("close-resource-window", {metaId: "mindMap",});
            this.$electron.ipcRenderer.send("close-resource-window", {metaId: "recognize",});
            this.$electron.ipcRenderer.send("close-resource-window", {metaId: "onlinePPT",});
            this.$electron.ipcRenderer.send('hideSuspensionWindow')
        },

        // 返回桌面
        backDesktop () {
            this.$electron.ipcRenderer.send('show-main-window')
        },

        picture () {//手机传图
            this.hiddenMenu()
            // let e = {target: { className: "suspension" }}
            // this.newWindow(e);
            this.$electron.ipcRenderer.send('showResourceHideWindow', { metaId: 'Picture', userId: this.userId, lessonId: this.lessonId })
        },
        countDown () {//活动计时
            this.hiddenMenu()
            // let e = {target: { className: "suspension" }}
            // this.newWindow(e);
            this.$electron.ipcRenderer.send('showResourceHideWindow', { metaId: "countDown", userId: this.userId, lessonId: this.lessonId })
        },

        extractNumber () {//随机点名
            this.hiddenMenu()
            // let e = {target: { className: "suspension" }}
            // this.newWindow(e);
            this.$electron.ipcRenderer.send('showResourceHideWindow', { metaId: "extractNumber", userId: this.userId, lessonId: this.lessonId })
        },
        charts () {//图表
            this.hiddenMenu()
            // let e = {target: { className: "suspension" }}
            // this.newWindow(e);
            this.$electron.ipcRenderer.send('showResourceHideWindow', { metaId: "charts", userId: this.userId, lessonId: this.lessonId })
        },
        mindMap () {//思维导图
            this.hiddenMenu()
            this.$electron.ipcRenderer.send('showResourceHideWindow', { metaId: "mindMap", userId: this.userId, lessonId: this.lessonId })
        },
        recognize(){//科普识图
            this.hiddenMenu()
            this.$electron.ipcRenderer.send('showResourceHideWindow', { metaId: "recognize", userId: this.userId, lessonId: this.lessonId })
        },
        // 打开关闭悬浮框
        newWindow (e) {
            if (this.newWindowStartTime) {
                let difTime = Date.now() - this.newWindowStartTime;
                if (difTime < 150) {
                    return;
                }
            }
            this.newWindowStartTime = Date.now();
            const type = e ? e.target.className : 'suspension'
            let win = this.$electron.remote.getCurrentWindow();
            let el = document.getElementById('contentShow');
            if (type === 'suspension') {
                function suspensionMouseEnter (event) {
                    win.setIgnoreMouseEvents(true, { forward: true })
                }
                function suspensionMouseLeave (event) {
                    win.setIgnoreMouseEvents(false)
                }
                function notSuspensionMouseEnter (event) {
                    console.log("createSuspension false mouseenter")
                    win.setIgnoreMouseEvents(false)
                }
                function notSuspensionMouseLeave (event) {
                    console.log("createSuspension false mouseleave")
                    win.setIgnoreMouseEvents(false)
                }
                if (this.createSuspension) {
                    el.removeEventListener('mouseenter', notSuspensionMouseEnter)
                    el.removeEventListener('mouseenter', suspensionMouseEnter)
                    el.removeEventListener('mouseleave', notSuspensionMouseLeave)
                    el.removeEventListener('mouseleave', suspensionMouseLeave)

                    el.addEventListener('mouseenter', suspensionMouseEnter)
                    el.addEventListener('mouseleave', suspensionMouseLeave)

                    this.hide = true
                    this.createSuspension = false
                    // this.$electron.ipcRenderer.send('hideTool');
                    this.show = false
                    // win.setAlwaysOnTop(false);
                    if (!window.localStorage.getItem('tips')) {
                        window.localStorage.setItem('tips', true)
                        this.showTips = true
                    }
                } else {
                    el.removeEventListener('mouseenter', notSuspensionMouseEnter)
                    el.removeEventListener('mouseenter', suspensionMouseEnter)
                    el.removeEventListener('mouseleave', notSuspensionMouseLeave)
                    el.removeEventListener('mouseleave', suspensionMouseLeave)

                    el.addEventListener('mouseenter', notSuspensionMouseEnter)
                    el.addEventListener('mouseleave', notSuspensionMouseLeave)

                    this.$refs.supTool.style.animation = 'show 1s ease forwards'
                    this.$refs.supTool.addEventListener('animationend', function () {
                        this.style.animation = ''
                    })
                    this.hide = false
                    this.createSuspension = true
                    // this.$electron.ipcRenderer.send('showTool');
                    this.show = true;
                    // win.setAlwaysOnTop(true);
                }

            }
        },
        suspensionMouseEnter (win) {
            console.log("createSuspension true mouseenter")
            win.setIgnoreMouseEvents(true, { forward: true })
        },
        suspensionMouseLeave (win) {
            console.log("createSuspension true mouseleave")
            win.setIgnoreMouseEvents(false)
        },
        notSuspensionMouseLeave () {

        },
        hiddenMenu () {
            this.hide = true
            this.createSuspension = false
            // this.$electron.ipcRenderer.send('hideTool');
            this.show = false
            let win = this.$electron.remote.getCurrentWindow()
            win.setIgnoreMouseEvents(true, { forward: true })
            let el = document.getElementById('suspension')
            let dom = document.getElementById('contentShow')
            function suspensionMouseEnter (event) {
                // console.log(11111)
                // event.stopPropagation()
                win.setIgnoreMouseEvents(true, { forward: true })
            }
            function suspensionMouseLeave (event) {
                // event.stopPropagation()
                // console.log(22222)
                win.setIgnoreMouseEvents(false)
            }
            dom.addEventListener('mouseenter', suspensionMouseEnter)
            dom.addEventListener('mouseleave', suspensionMouseLeave)
            el.addEventListener('mouseenter', suspensionMouseLeave)
            el.addEventListener('mouseleave', suspensionMouseEnter)
        }
    }
}
</script>

<style lang="scss" scope>
.move-tips {
    position: absolute;
    z-index: 99;
    bottom: 90px;
    width: 165px;
    height: 55px;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    padding: 10px !important;
    background-color: #eaa33a;
    font-size: 12px;
    pointer-events: none;
    &::after {
        content: "";
        position: absolute;
        border-top: 10px solid #eaa33a;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        bottom: 0;
        right: 50%;
        transform: translate(50%, 100%);
    }
}
#sup-tool {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 580px;
    overflow: hidden;
    *::-webkit-scrollbar {
        width: 4px;
        background: transparent !important;
    }

    *::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(171, 178, 185, 0.9);
        background: transparent !important;
    }

    *::-webkit-scrollbar-track {
        background: transparent;
    }

    @keyframes show {
        0% {
            opacity: 0;
            height: 0px;
        }
        100% {
            opacity: 1;
            height: 580px;
        }
    }
    // * {
    //     padding: 0;
    //     margin: 0;
    // }

    #suspension {
        -webkit-user-select: none;
        overflow: hidden;
        cursor: pointer;
        height: 80px;
        width: 80px;
        color: #fff;
        border-radius: 50%;
        margin: 0 auto;
        background-image: url("../assets/tool.png");
        background-size: 80px 80px;
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
    }
    .margin {
        height: 0 !important;
    }
    .supTool {
        width: 240px;
        height: 580px;
        overflow: hidden;
        padding-bottom: 40px;

        .tool {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 540px;
            border: 1px solid rgba(220, 223, 231, 1);
            background: linear-gradient(
                0deg,
                rgba(246, 252, 255, 1) 0%,
                rgba(247, 251, 255, 1) 100%
            );
            border-radius: 4px;
            .menu-container {
                height: 500px;
                overflow: auto;
            }
            .el-menu {
                border-right: none !important;
                background: transparent !important;
            }

            .el-submenu__title {
                font-size: 16px !important;
                height: 48px;
                line-height: 48px;
                padding-left: 10px !important;
            }
            .el-menu-item{
                padding-top: 0;
                height: 36px!important;
                line-height: 36px!important;
            }

            .border {
                display: inline;
                width: 4px;
                height: 15px;
                // background: rgba(72, 147, 255, 1);
                position: relative;
                top: -1px;
                margin-right: 10px;
            }
            .item-content{
                background:rgba(247, 251, 255, 1) ;
                height: 30px;
                padding-left: 20px !important;
                line-height: 30px;
            }
            .item-content:hover{
                color: #409eff;
            }
            .img-ico {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                margin-bottom: 3px;
            }
            // .ppt-title {
            //     width: 200px;
            //     background: rgba(234, 240, 249, 1);
            //     border-radius: 8px;
            //     display: flex;
            //     justify-content: flex-start;
            //     padding: 9px 0;
            //     padding-left: 15px;
            //     align-items: center;
            // }
            // .title {
            //     width: 200px;
            //     height: 55px;
            //     background: rgba(234, 240, 249, 1);
            //     border-radius: 8px;
            //     display: flex;
            //     justify-content: flex-start;
            //     padding-left: 15px;
            //     align-items: center;

            //     .name {
            //         display: inline;
            //         font-size: 16px;
            //         color: #303133;
            //     }
            // }
        }
    }
    
    .hide {
        border: none;
        width: 0;
        height: 0;
        background: transparent;
    }

    .list {
        display: flex;
        flex: 1;
        flex-direction: column;
        width: 100%;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        a {
            display: block;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            border-bottom: 1px solid #409eff;
        }

        .el-menu--inline {
            // max-height: 900px !important;//限制显示资源个数
            overflow-y: hidden !important;
            overflow-x: hidden !important;
            ::-webkit-scrollbar {
                display: block;
            }
        }
    }
    
    .change {
        height: 48px;
        background: #E7F2FE;  
        color: #303133;
        padding: 0 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        -webkit-user-select: none;

        // .type {
        //     // width: 48px;
        //     display: flex;
        //     flex-direction: column;
        //     justify-content: center;
        //     align-items: center;
        // }

        img {
            width: 24px;
        }

        span {
            font-size: 14px;
            color: #606266;
        }
    }
}
    #sup-tool .supTool .tool .el-submenu__title{
        font-size: 16px;
        font-weight: bold;
        background: #E7F2FE;
    }
    .el-submenu .el-menu-item{
        padding-left: 20px !important;
    }
    .menu-item .item-name{
        white-space: nowrap;
    }
    .name-box{
        display: inline-flex;
        overflow: hidden;
    }
    .menu-item .item-name:hover {
        text-overflow:ellipsis;
        animation: move 5s 0.3s linear infinite;
        display: inline-block;
  }
  @keyframes move {
    to {
      transform: translate3d(-200%,0,0)
    }
  }
</style>
